<template>
	<view class="ylx-container">
		<view class="sticky">
			<view class="forum" :class="{ 'active': activeIndex === 0  }" @click="handleIndex('论坛', 0)">论坛</view>
			<view class="recruit" :class="{ 'active': activeIndex === 1  }" @click="handleIndex('招聘', 1)">招聘</view>
			<view class="chat" @click="handleRelease">
				<image class="img" src="https://www.worldintek.com:39011/yaolexue-service/icon_fabu.png" mode="">
				</image>
			</view>
		</view>


		<view v-if="activeIndex === 0" class="forum-scroll scroll">
			<scroll-view scroll-y="true">
				<view class="forum-content" v-for="(item, index) in forumList" :key="index">
					<view class="forum-box">
						<view style="display: flex;">
							<image class="avatar"
								:src="`https://www.worldintek.com:39011/yaolexue-service/${item.createByIcon}`" mode="">
							</image>
							<view style="display: flex; flex-direction: column;">
								<view class="name">
									{{ item.createByName}}
								</view>
								<view class="time">
									{{ item.createTime}}
								</view>
							</view>
						</view>
						<view class="desc">

							{{ item.title}}
						</view>

						<!-- <video id="myVideo" :src="`https://www.worldintek.com:39011/yaolexue-service/${item.videoDtos[0].compressLink}`"
                                  muted show-mute-btn></video> -->
						<image class="img"
							:src="`https://www.worldintek.com:39011/yaolexue-service/${item.imageDtos[0].compressLink}`"
							mode=""></image>
					</view>

				</view>
				<u-loadmore marginTop="40" :status="forumStatus" />
			</scroll-view>

		</view>
		<view v-else class="recruit-scroll scroll">

			<scroll-view scroll-y="true">
				<view class="recruit-box" v-for="(item, index) in recruitList" :key="index">
					<view class="box-header">
						<view class="vocation">
							{{item.positionName}}
						</view>
						<view class="salary">
							{{item.salary}}
						</view>
					</view>
					<view class="experience">
						{{item.contentText}}
					</view>
					<view class="company">

						<view class="company-img">

							<view class="companyName">
								{{item.companyName[0]}}
							</view>
						</view>
						<view class="company-name">
							{{item.companyName}}
						</view>
					</view>
					<view class="address-info">
						姓名：{{item.publisher}} 联系方式：{{item.phone}}
						地址：江苏省泰州市泰阳大道3800号
					</view>
				</view>
				<u-loadmore marginTop="40" :status="recruitStatus" />
			</scroll-view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				activeIndex: 0,
				recruitQueryInfo: {
					limit: 10,
					page: 1
				},
				forumQueryInfo: {
					limit: 10,
					page: 1
				},
				forumList: [],
				forumTotal: 0,
				recruitList: [],
				recruitTotal: 0,
				isloading: false,
				forumStatus:'loading',
				recruitStatus: 'loading',
			}
		},
		onLoad() {
			this.getForumList()
			this.getRecruitList()
		},
		onReachBottom() {
			console.log(11111111111111111)
			if (this.isloading) return;

			if (this.activeIndex === 0) {
				this.forumStatus != 'nomore' && this.getForumList();
			} else {
				this.recruitStatus != 'nomore' && this.getRecruitList();
			}
		},
		methods: {
			async getForumList(cb) {
				this.isloading = true
				const res = await this.$http.get('/yaolexue-service-portal/forum/pageForum', this.forumQueryInfo, {
					showLoading: true
				})

				this.isloading = false
				cb && cb()
				this.forumList = [...this.forumList, ...res.data.items]
				this.forumTotal = res.data.total
				this.forumStatus = this.forumList.length >= this.forumTotal ? 'nomore' : 'loading'
				this.forumQueryInfo.page += 1;
			},
			async getRecruitList(cb) {
				this.isloading = true
				const res = await this.$http.get('/yaolexue-service-portal/recruit/pageRecruit', this
				.recruitQueryInfo, {
					showLoading: true
				})
				// console.log('getRecruitList', res);
				this.isloading = false
				cb && cb()
				this.recruitList = [...this.recruitList, ...res.data.items]
				this.recruitTotal = res.data.total
				
				this.recruitStatus = this.recruitList.length >= this.recruitTotal ? 'nomore' : 'loading'
				this.recruitQueryInfo.page += 1;
				
			},

			handleIndex(item, index) {
				this.activeIndex = index
			},
			handleRelease() {
				uni.navigateTo({
					url: '/subPages/forumRelease/forumRelease'
				})
			},
		}
	}
</script>

<style lang="scss">
	.ylx-container {
		min-height: 100vh;
		background-color: $color-bg-2;

		.sticky {

			position: sticky;
			top: 0;
			background-color: $color-toolbar;
			z-index: 999;
			display: flex;
			align-items: center;
			padding: 53rpx 0 41rpx;

			.forum {
				min-width: 80rpx;
				height: 35rpx;
				line-height: 56rpx;
				height: fit-content;

				font-family: Source Han Sans CN;


				margin-left: 93rpx;

			}

			.recruit {
				min-width: 90rpx;
				line-height: 56rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #666666;
				margin-left: 128rpx;




			}

			.chat {
				margin-right: 56rpx;
				margin-left: 260rpx;

				.img {
					width: 34rpx;
					height: 33rpx;
				}
			}

			.active {
				position: relative;
				font-size: 38rpx;
				color: #FA312A;
				font-weight: 500;

				&::after {
					content: '';
					position: absolute;
					left: 8rpx;
					bottom: -21rpx;
					width: 54rpx;
					height: 7rpx;
					background: #FA312A;
					border-radius: 4rpx;


				}
			}
		}

		.scroll {
			margin-top: 17rpx;
		}

		.forum-scroll {

			.forum-content {
				width: 749rpx;
				height: 530rpx;
				background: #FFFFFF;
				margin-bottom: 19rpx;

				.forum-box {
					padding: 22rpx 45rpx 38rpx 42rpx;
					display: flex;
					flex-direction: column;
				}

				.avatar {
					width: 64rpx;
					height: 64rpx;
					background: #FA332B;
					border-radius: 50%;
					margin-right: 22rpx;
					margin-bottom: 36rpx;
				}

				.name {
					width: fit-content;
					height: fit-content;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;


				}

				.time {
					width: fit-content;
					height: fit-content;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #CCCCCC;

				}

				.desc {
					margin-bottom: 23rpx;
					width: fit-content;
					height: fit-content;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;

				}

				.img {
					width: 662rpx;
					height: 320rpx;
					// background: #000000;
					border-radius: 32rpx;
				}
			}

		}

		.recruit-scroll {

			.recruit-box {
				width: 749rpx;
				height: 446rpx;
				background: #FFFFFF;
				padding: 26rpx 51rpx 0 50rpx;
				margin-bottom: 19rpx;

				.box-header {
					display: flex;
					justify-content: space-between;

					.vocation {
						width: 100%;
						height: 27rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #333333;
						line-height: 24rpx;
					}

					.salary {
						width: 70rpx;
						height: 21rpx;
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #DF536E;
						line-height: 24rpx;
					}
				}

				.experience {
					width: 100%;
					height: 169rpx;
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;

					margin-top: 25rpx;
				}

				.company {
					display: flex;
					align-items: center;

					.company-img {
						width: 52rpx;
						height: 52rpx;
						border-radius: 50%;
						background-color: #FA312A;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.company-name {
						width: fit-content;
						height: 30rpx;
						font-size: 22rpx;
						font-family: Adobe Heiti Std;
						font-weight: normal;
						color: #333333;
						margin-left: 19rpx;
					}
				}

				.address-info {
					margin-top: 20rpx;
					width: 385rpx;
					height: 58rpx;
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					line-height: 41rpx;
				}
			}


		}

	}
</style>